<template>
  <div>
    <!-- 修改、添加的弹窗 -->
    <h3>{{openType}}联系人</h3>
    <input type="text" placeholder="姓名" v-model="name">
    <br>
    <input type="text" placeholder="电话号码" v-model="phone">
    <br>
    <button @click="sure">确认</button>
    <br>
    <button @click="cancel">取消</button>
    <br>
  </div>
</template>

<script>
export default {
  props: ['openType'],
  data() {
    return {
      name: '',
      phone: '',
      idx: 0
    }
  },
  methods: {
    setVal(info) {
      console.log(info);
      this.idx = info.index;
      // 给弹窗中的输入框赋值
      this.name = info.name;
      this.phone = info.phone;
    },
    sure() {
      let info = {
        name: this.name,
        phone: this.phone,
      }
      if(this.openType == '新建') {
        // 新建联系人
        this.$emit('add', info);
      }else {
        // 编辑联系人
        let info = {
          name: this.name,
          phone: this.phone,
          idx: this.idx
        }
        this.$emit('editContact', info);
      }
      this.close();
    },
    cancel() {
      this.close();
    },
    // 统一处理关闭的逻辑
    close() {
      this.name = '';
      this.phone = '';
      // 子传父，通知父组件关闭弹窗
      this.$emit('close');
    }
  }
}
</script>

<style>

</style>